<template>
  <div>
    <Input v-model="searchWord" placeholder="输入用户名" id="searchBox" />
    <Button type="primary" id="searchBtn" @click="search">搜索</Button>
    <Table border :columns="historyColumns" :data="historyData" id="userTable" width="userTable">
<!--头像-->
      <template slot-scope="{ row }" slot="head">
        <img :src="row.head" alt="">
      </template>
<!--状态-->
      <template slot-scope="{ row, index }" slot="state">
        <Button type="error" size="small" @click="change(index)" v-if="row.state == 0" >禁用</Button>
        <Button type="success" size="small" @click="change(index)" v-else >启用</Button>
      </template>
<!--操作-->
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
        <Button type="primary" size="small"  @click="edit(index)">修改</Button>
      </template>
    </Table>
    <Page :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="changepage"></Page>
    <modal v-model = "modalFlag" >
      <p slot="header" style="text-align:center">
        <span>账号详情</span>
      </p>
      <row>
        <Col span="12" offset="4">
          <img :src="showInfo.head" alt="" class="head_img">
          <p>账号：{{showInfo.acc}}</p>
          <p>昵称：{{showInfo.nickname}}</p>
          <p>注册时间：{{showInfo.create_time}}</p>
          <p>金额：{{showInfo.money}}</p>
          <p>签名：{{showInfo.desc}}</p>
          <p>状态：{{showInfo.state}}</p>
          <p>手机号：{{showInfo.phone}}</p>
          <p>收货地址：{{showInfo.address}}</p>

        </Col>
      </row>
      <div slot="footer">
        <Button type="primary" size="large" long @click="modalFlag = false">关闭</Button>
      </div>
    </modal>
<!--    账号修改弹出框-->
    <modal v-model = "editModalFlag" >
      <p slot="header" style="text-align:center">
        <span>账号编辑</span>
      </p>
      <row>
        <Col span="12" offset="4">
          <Form ref="formValidate" :model="formValidate" :label-width="80">
            <input type="text" v-model = "formValidate.index" hidden>
            <FormItem label="昵称" prop="nickname">
              <Input v-model="formValidate.nickname" @keyup.native="no_null_nickname"></Input>
            </FormItem>
            <FormItem label="密码" prop="pwd">
              <Tooltip content="密码格式为8-16位的数字或字母" placement="right">
              <Input v-model="formValidate.pwd" type="password">
              </Input>
              </Tooltip>
            </FormItem>
            <FormItem label="签名" prop="desc">
              <Input v-model="formValidate.desc"></Input>
            </FormItem>
            <FormItem label="电话" prop="phone">
              <Input v-model="formValidate.phone"></Input>
            </FormItem>
            <FormItem label="地址" prop="address" @keyup.native="no_null_address">
              <Input v-model="formValidate.address"></Input>
            </FormItem>
          </Form>

        </Col>
      </row>
      <div slot="footer">
        <Button type="primary" size="large" long @click="closeEdit()">保存</Button>
      </div>
    </modal>
  </div>
</template>
<script>
    import axios from 'axios';
    import {GetUser,changeState,closeEdit,search} from 'server/UserManage.js';
  export default {
    data() {
      return {
        searchWord: '',
        modalFlag: false,
        editModalFlag: false,
        userData: [],
        showInfo:{
          acc: '这是账号',
          nickname: '这是昵称',
          create_time: '这是注册时间',
        },
        formValidate:{
          acc:'',
          pwd:'',
          nickname:'',
          head:'',
          desc:'',
          phone:'',
          address:'',
          index:''
        },
        ajaxHistoryData:[],
        // 初始化信息总条数
        dataCount:0,
        // 每页显示多少条
        pageSize:3,
        historyColumns: [
          {
            title: '账号',
            key: 'acc'
          },
          {
            title: '昵称',
            key: 'nickname'
          },
          {
            title: '注册时间',
            key: 'create_time'
          },
          {
            title: '金额',
            key: 'money'
          },
          {
            title: '头像',
            key: 'head',
            slot: 'head'
          },
          {
            title: '签名',
            key: 'desc'
          },
          {
            title: '手机号',
            key: 'phone'
          },
          {
            title: '收货地址',
            key: 'address'
          },
          {
            title: '状态',
            key: 'state',
            slot: 'state',
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        historyData: []
      }
    },
    methods: {
      // 获取历史记录信息
      handleListApproveHistory(){
        // 保存取到的所有数据
        this.ajaxHistoryData = this.userData;
 
        this.dataCount = this.userData.length;
        // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
        if(this.userData.length < this.pageSize){
          this.historyData = this.ajaxHistoryData;
        }else{
          this.historyData = this.ajaxHistoryData.slice(0,this.pageSize);
        }
      },
      changepage(index){
        var _start = ( index - 1 ) * this.pageSize;
        var _end = index * this.pageSize;
        this.historyData = this.ajaxHistoryData.slice(_start,_end);
      },
      show (index) {
        this.modalFlag = true;
        this.showInfo.acc = this.historyData[index].acc;
        this.showInfo.nickname = this.historyData[index].nickname;
        this.showInfo.create_time = this.historyData[index].create_time;
        this.showInfo.money = this.historyData[index].money;
        this.showInfo.head = this.historyData[index].head;
        this.showInfo.desc = this.historyData[index].desc;
        this.showInfo.state = this.historyData[index].state;
        this.showInfo.phone = this.historyData[index].phone;
        this.showInfo.address = this.historyData[index].address;
      },
      change(index){
          let $state;
        if (this.historyData[index].state == 0 ){
          this.historyData[index].state = 1
          $state = this.historyData[index].state
        }else {
          this.historyData[index].state = 0
          $state = this.historyData[index].state
        }
        let $acc = this.historyData[index].acc;
        let $data = {
            state:$state,
            acc:$acc
        }
          //发送数据
          changeState($data).then(res=>{
   
          })
      },
      edit(index){
        this.editModalFlag = true;
        this.formValidate.acc = this.historyData[index].acc;
        this.formValidate.pwd = this.historyData[index].pwd;
        this.formValidate.nickname = this.historyData[index].nickname;
        this.formValidate.desc = this.historyData[index].desc;
        this.formValidate.phone = this.historyData[index].phone;
        this.formValidate.address = this.historyData[index].address;
        this.formValidate.index = index;
      },
      closeEdit(){

        let index = this.formValidate.index;
        let $acc = this.formValidate.acc;
        let $nickname = this.formValidate.nickname;
        let $pwd = this.formValidate.pwd;
        let $desc = this.formValidate.desc;
        let $phone = this.formValidate.phone;
        let $address = this.formValidate.address;

        if (!$nickname) {
          return this.$Message.error('请填写用户昵称')
        }
        if (!this.$rex.pwdcheck($pwd)) {
          return this.$Message.error('请填写正确的密码格式')
        }
        if (!this.$rex.phoneNum($phone)) {
          return this.$Message.error('请填写正确的手机号')
        }
        if (!$address) {
          return this.$Message.error('地址不能为空')
        }


        this.historyData[index].nickname = $nickname;
        this.historyData[index].pwd = $pwd;
        this.historyData[index].desc = $desc;
        this.historyData[index].phone = $phone;
        this.historyData[index].address = $address;


        let $data = {
          acc:$acc,
          nickname:$nickname,
          pwd:$pwd,
          desc:$desc,
          phone:$phone,
          address:$address
        }
        //发送数据
        closeEdit($data).then(res=>{

        })
        this.editModalFlag = false;
      },
      search(){
          let $data = {
            searchWord:this.searchWord
          }
          let _this = this;

          search($data).then(res=>{
    
              _this.userData = res.data;
              _this.handleListApproveHistory();
          })
      },
      no_null_nickname(){
        this.formValidate.nickname = this.formValidate.nickname.replace(/^\s+|\s+$/gm,'')
      },
      no_null_address(){
        this.formValidate.address = this.formValidate.address.replace(/^\s+|\s+$/gm,'')
      }
    },
    created(){

      GetUser().then(res => {
    
        this.userData = res.data;
        this.handleListApproveHistory();
      })


    }
  }

</script>

<style scoped>
  #searchBox{
    width: 20%;
    margin-bottom: 20px;
    margin-right: 10px;
  }
  #searchBtn{
    margin-bottom: 20px;

  }
  #userTable{
    margin-bottom: 20px;
  }
  #userTable img{
    width: 40px;
  }
  .head_img{
    width: 100px;

  }
</style>
